    <%@ page contentType="text/html;charset=UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>后台管理</title>
        <link rel="icon"
        href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
        <link rel="stylesheet"
        href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
        <script
        src="${pageContext.request.contextPath}/lib/static/common/js/jquery.min.js"></script>
        <script src="${pageContext.request.contextPath}/lib/layui/layui.js"
        charset="utf-8"></script>
        </head>
        <body>
        <div class="layui-fluid">
        <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
        <legend>树形菜单</legend>
        </fieldset>
        </div>
        <hr class="layui-bg-red">
        </div>
        <a class="layui-btn layui-btn-primary"
        onclick="window.location.href='${pageContext.request.contextPath}/sys/menu/menu_ui_tree';">刷新</a>
        <a class="layui-btn layui-btn-primary" onclick="add(null);">新增一行</a>
        <a class="layui-btn layui-btn-primary" onclick="getCheckData();">获取选中行数据</a>
        <a class="layui-btn layui-btn-primary" onclick="getCheckLength();">获取选中数目</a>
        <a class="layui-btn layui-btn-primary" onclick="print();">打印缓存对象</a>
        <div>
        <table class="layui-hidden" id="listTable" lay-filter="listTable"></table>
        </div>
        <script>
        var editObj = null, ptable = null, dltable = null, tableId = 'listTable', layer = null;
        layui
        .config(
        {
        base : '${pageContext.request.contextPath}/lib/layui/extend/'
        })
        .extend({
        dltable : 'dltable'
        })
        .use(
        [ 'jquery', 'dltable', 'layer' ],
        function() {
        var $ = layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer = layui.layer;
        ptable = treeGrid
        .render({
        id : tableId,
        elem : '#' + tableId,
        idField : 'id',
        url : '${pageContext.request.contextPath}/lib/static/common/json/treeData.json',
        cellMinWidth : 100,
        treeId : 'id'//树形id字段名称
        ,
        treeUpId : 'pId'//树形父id字段名称
        ,
        treeShowName : 'name'//以树形式显示的字段
        ,
        heightRemove : [ ".dHead", 10 ]//不计算的高度,表格设定的是固定高度，此项不生效
        ,
        height : '100%',
        isFilter : false,
        iconOpen : true//是否显示图标【默认显示】
        ,
        isOpenDefault : true//节点默认是展开还是折叠【默认展开】
        ,
        loading : true,
        cols : [ [
        {
        type : 'numbers'
        },
        {
        type : 'radio'
        },
        {
        type : 'checkbox',
        sort : true
        },
        {
        field : 'name',
        width : 300,
        title : '水果名称',
        sort : true
        },
        {
        field : 'id',
        width : 100,
        title : 'id',
        sort : true
        },
        {
        field : 'pId',
        title : 'pid',
        sort : true
        },
        {
        width : 100,
        title : '操作',
        align : 'center'/*toolbar: '#barDemo'*/
        ,
        templet : function(d) {
        var html = '';
        var addBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
        var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
        return addBtn + delBtn;
        }
        } ] ],
        isPage : false,
        parseData : function(res) {//数据加载后回调
        return res;
        },
        onClickRow : function(index, o) {
        console.log(index, o, "单击！");
        },
        onDblClickRow : function(index, o) {
        console.log(index, o, "双击");
        }
        });

        treeGrid.on('tool(' + tableId + ')', function(obj) {
        if (obj.event === 'del') {//删除行
        del(obj);
        } else if (obj.event === "add") {//添加行
        add(obj);
        }
        });
        });

        function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {
        icon : 3,
        title : '提示'
        }, function(index) {//确定回调
        obj.del();
        layer.close(index);
        }, function(index) {//取消回调
        layer.close(index);
        });
        }

        var i = 1000000;
        //添加
        function add(pObj) {
        var pdata = pObj ? pObj.data : null;
        var param = {};
        param.name = '水果' + Math.random();
        param.id = ++i;
        param.pId = pdata ? pdata.id : null;
        treeGrid.addRow(tableId,
        pdata ? pdata[treeGrid.config.indexName] + 1 : 0, param);
        }

        function print() {
        console.log(treeGrid.cache[tableId]);
        var loadIndex = layer.msg("对象已打印，按F12，在控制台查看！", {
        time : 3000,
        offset : 'auto'//顶部
        ,
        shade : 0
        });
        }

        function openorclose() {
        var map = treeGrid.getDataMap(tableId);
        var o = map['102'];
        treeGrid.treeNodeOpen(tableId, o, !o[treeGrid.config.cols.isOpen]);
        }

        function openAll() {
        var treedata = treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId,
        !treedata[0][treeGrid.config.cols.isOpen]);
        }

        function getCheckData() {
        var checkStatus = treeGrid.checkStatus(tableId), data = checkStatus.data;
        layer.alert(JSON.stringify(data));
        }
        function radioStatus() {
        var data = treeGrid.radioStatus(tableId)
        layer.alert(JSON.stringify(data));
        }
        function getCheckLength() {
        var checkStatus = treeGrid.checkStatus(tableId), data = checkStatus.data;
        layer.msg('选中了：' + data.length + ' 个');
        }

        function reload() {
        treeGrid.reload(tableId, {
        page : {
        curr : 1
        }
        });
        }
        function query() {
        treeGrid.query(tableId, {
        where : {
        name : 'sdfsdfsdf'
        }
        });
        }

        function test() {
        console.log(treeGrid.cache[tableId], treeGrid.getClass(tableId));

        /*var map=treeGrid.getDataMap(tableId);
        var o= map['102'];
        o.name="更新";
        treeGrid.updateRow(tableId,o);*/
        }
        </script>
        <script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?e2af8415b6ffbaeb52de4d080cb4ba85";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
        })();
        </script>
        </body>
        </html>